<!DOCTYPE html>
<html lang="zh-Hans-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title><th:block th:text="${tilesetName}" />Mapbox预览</title>
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
    <link href="/static/assets/maplibre-gl-js/v4.5.1/maplibre-gl.css" rel="stylesheet">
    <script src="/static/assets/maplibre-gl-js/v4.5.1/maplibre-gl.js"></script>
    <style>
        body {
            margin: 0;
            padding: 0;
        }

        #map {
            position: absolute;
            top: 0;
            bottom: 0;
            width: 100%;
        }
    </style>
</head>

<body>
<div id="map"></div>
<script th:inline="javascript">
    const metaDataStr = /*[[${metaData}]]*/{};
    var metaData = JSON.parse(metaDataStr)
    var basePath = [[${basePath}]];
    var tiles = basePath + "/api/tilesets/" + [[${tilesetName}]] + "/{z}/{x}/{y}." + metaData.format

    var map = new maplibregl.Map({
        container: 'map',
        attributionControl: false,
        style: {
            "version": 8,
            "name": "Mapbox",
            "sprite": basePath + "/static/sprites/streets/sprite",
            "glyphs": basePath + "/api/fonts/{fontstack}/{range}.pbf",
            "sources": {
                "osm-tiles": {
                    "scheme": metaData.scheme,
                    "type": "vector",
                    "tiles": [tiles],
                    "minzoom": metaData.minzoom,
                    "maxzoom": metaData.maxzoom,
                }
            },
            "layers": [
            {
                "id": "background",
                "type": "background",
                "layout": {
                    "visibility": "visible"
                },
                "paint": {
                    "background-color": "hsl(200, 98%, 24%)"
                }
            },
            {
                "id": "boundaries",
                "type": "line",
                "source": "osm-tiles",
                "source-layer": "boundaries",
                "paint": {
                  "line-color": "#00ffff"
                }
            },
            {
                "id": "transportation",
                "type": "line",
                "source": "osm-tiles",
                "source-layer": "transportation",
                "paint": {
                  "line-color": "#f2934a",
                  "line-opacity": 1,
                  "line-width": 1,
                },
            },
            {
                "id": "buildings",
                "type": "fill",
                "source": "osm-tiles",
                "source-layer": "buildings",
                "paint": {
                  "fill-color": "#eeeeee"
                }
            }
            ]
        },
        center: [73.229304,3.203067],
        zoom: 12,
        hash: true
    })

    map.on('load', () => {
        map.addSource('China', {
            type: 'geojson',
            data: '/static/ChinaProvince.geojson'
        });

        map.addLayer({
            'id': 'ChinaBounds',
            'type': 'line',
            'source': 'China',
            "paint": {
              "line-color": "hsl(202, 100%, 72%)",
              "line-opacity": 0.5,
              "line-width": 3,
            },
        });

        map.addLayer({
            'id': 'Provice',
            'type': 'symbol',
            source: 'China',
            layout: {
                'text-field': ['get', 'name'],
                'text-size': 12,
                "text-allow-overlap": false,
                "text-offset": [0, 0],
                "text-anchor": "center",
                "text-justify": "center",
                'text-font': ['Arial Unicode MS Regular'],
            },
            paint: {
                "text-halo-color": "#444444",
		        "text-halo-width": 1,
                "text-color": '#FFFFFF'
            }
        });

        if(metaData.center){
            setTimeout(function(){
                const center = metaData.center.split(",");
                map.flyTo({
                    center: [center[0], center[1]],
                    zoom: center[2],
                    essential: true
                });
            }, 2000 )
        }else{
            console.log("no center set!")
        }
    });

    map.addControl(new maplibregl.NavigationControl())
    map.addControl(new maplibregl.FullscreenControl())
    map.addControl(new maplibregl.ScaleControl())
</script>
</body>

</html>